<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>登录</title>
		<!-- 样 式 文 件 -->
		<th:block th:include="include :: header('登录')"/>
		<link rel="stylesheet" th:href="@{/admin/css/other/login.css}"/>
	</head>
    <!-- 代 码 结 构 -->
	<body background="admin/images/background.svg" style="background-size: cover;">
		<form class="layui-form" action="javascript:void(0);">
			<div class="layui-form-item">
				<img class="logo" src="admin/images/logo.png" />
				<div class="title">Fast Admin</div>
				<div class="desc">
					最 具 影 响 力 的 规 范 只 为 满 足 自 己
				</div>
			</div>
			<div class="layui-form-item">
				<input placeholder="账 户 : admin " name="username" lay-verify="required" hover class="layui-input"  value="admin"/>
			</div>
			<div class="layui-form-item">
				<input placeholder="密 码 : admin " name="password" lay-verify="required" hover class="layui-input" type="password" value="admin" />
			</div>
			<div class="layui-form-item">
				<input placeholder="验证码 : "  hover  name="captcha" lay-verify="required" class="code layui-input layui-input-inline"  />
				<!-- 获 取 验 证 码 路 径 -->
				<img src="/system/captcha/generate" id="captchaImage" class="codeImage" />
			</div>
			<div class="layui-form-item">
				<input type="checkbox" name="remember-me" title="记住密码" lay-skin="primary" checked>
			</div>
			<div class="layui-form-item">
				<button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
					登 入
				</button>
			</div>
		</form>
		<!-- 资 源 引 入 -->
		<th:block th:include="include :: footer"/>
		<script>
			layui.use(['form', 'button', 'popup'], function() {
				var form = layui.form;
				var button = layui.button;
				var popup = layui.popup;

				// 验 证 码 地 址
				let captchaPath = "/system/captcha/generate";
				
                // 登 录 提 交
				form.on('submit(login)', function(data) {
					let loader = layer.load();
					let btn = button.load({elem: '.login'});
					$.ajax({
						url: '/login',
						data: data.field,
						type: "post",
						dataType: 'json',
						success: function (result) {
							console.log(result)
							layer.close(loader);
							btn.stop(function () {
								if (result.success) {
									popup.success(result.message, function () {
										location.href = "/index";
									})
								} else {
									popup.failure(result.message, function () {
										document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
									});
								}
							})
						}
					});
					return false;

					/// 动画
					// button.load({
					// 	elem: '.login',
					// 	time: 1500,
					// 	done: function() {
					// 		popup.success("登录成功", function() {
					// 			location.href = "thymeleaf.html"
					// 		});
					// 	}
					// })
				});

				$("#captchaImage").click(function () {
					document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
				})

				//
				setInterval(function () {
					document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
				}, 30 * 1000);
				validateKickout();
			})
		</script>
		<script>
			if (window != top) {
				top.location.href = location.href;
			}

			function validateKickout() {
				if (getParam("abnormalout") == 1) {
					layer.alert("<font color='red'>您已在别处登录，请您修改密码或重新登录</font>", {
								icon: 0,
								title: "系统提示"
							},
							function (index) {
								layer.close(index);
							});
				} else if (getParam("sessionout") == 1) {
					layer.alert("<font color='red'>登录已过期，请重新登录</font>", {
								icon: 0,
								title: "系统提示"
							},
							function (index) {
								layer.close(index);
							});
				}
			}

			function getParam(paramName) {
				var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return decodeURI(r[2]);
				return null;
			}
		</script>
	</body>
</html>
